<template>
  <div>
    <!--添加按钮-->
    <el-card>
      <div class="topbar">
        <el-input
          class="search"
          v-model="list.adminUsername"
          placeholder="请输入管理员账号"
          @keyup.enter.native="select(list.adminUsername)"
        >
          <el-button
            type="primary"
            @click="select(list.adminUsername)"
            slot="append"
            >查询</el-button
          >
        </el-input>
        <el-button
          class="adduser"
          type="primary"
          @click="dialogFormaddVisible = true"
          >添加账号</el-button
        >
      </div>
    </el-card>

    <!--数据列表-->
    <div>
      <el-table
        :data="list.list"
        border
        :header-cell-style="headClass"
        :cell-style="rowClass"
      >
        <!-- 				<el-table-column type="selection" width="50">
				</el-table-column> -->
        <el-table-column prop="adminId" label="管理员ID"> </el-table-column>
        <el-table-column prop="adminUsername" label="管理员账号">
        </el-table-column>
        <el-table-column prop="adminEmail" label="邮箱"> </el-table-column>
        <el-table-column prop="adminDisabled" label="是否可用">
          <template slot-scope="scope">
            <!-- <span>{{scope.row.adminId}}</span> -->
            <el-tag v-if="scope.row.adminDisabled === true" type="success"
              >可用</el-tag
            >
            <el-tag v-else type="danger">不可用</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="adminLastlogintime" label="上次登录时间">
        </el-table-column>
        <el-table-column prop="action" label="操作" width="200px">
          <template slot-scope="scope">
            <el-button type="primary" @click="update(scope.row)"
              >修改</el-button
            >
            <el-button type="danger" @click="deluser(scope.row.adminId)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--添加表单-->
    <el-dialog
      title="添加管理员"
      :visible.sync="dialogFormaddVisible"
      width="30%"
    >
      <el-form ref="addform">
        <el-form-item label="管理员账号" prop="adminUsername">
          <el-input
            autocomplete="off"
            size="small"
            v-model="addform.adminUsername"
          ></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="adminPassword">
          <el-input
            autocomplete="off"
            size="small"
            v-model="addform.adminPassword"
          ></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="adminEmail">
          <el-input
            autocomplete="off"
            size="small"
            v-model="addform.adminEmail"
          ></el-input>
        </el-form-item>
        <el-form-item prop="adminDisabled" label="是否可用">
          <el-radio-group v-model="addform.adminDisabled">
            <el-radio :label="true">可用</el-radio>
            <el-radio :label="false">不可用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item prop="roles" label="权限配置">
          <!-- el-checkbox踩坑，如果标签之间不写值得话默认显示label得值 -->
          <el-checkbox-group v-model="value" @change="valChange">
            <!-- 添加权限 -->
            <!--            <el-checkbox :label="1" disabled checked>主页</el-checkbox>-->
            <el-checkbox
              v-for="role in powers"
              :label="role.menuId"
              :value="role.id"
              :key="role.id"
              v-model="value"
              >{{ role.menuName }}</el-checkbox
            >
          </el-checkbox-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormaddVisible = false">取 消</el-button>
        <el-button type="primary" @click="adduser()">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 修改表单 -->
    <el-dialog
      title="修改管理员"
      :visible.sync="dialogFormupdateVisible"
      width="30%"
    >
      <el-form :model="updateform">
        <el-form-item label="管理员ID">
          <el-input
            v-model="updateform.adminId"
            autocomplete="off"
            disabled=""
          ></el-input>
        </el-form-item>
        <el-form-item label="管理员账号">
          <el-input
            v-model="updateform.adminUsername"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="管理员邮箱">
          <el-input
            v-model="updateform.adminEmail"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="是否可用">
          <el-radio-group v-model="updateform.adminDisabled">
            <el-radio :label="true">可用</el-radio>
            <el-radio :label="false">不可用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormupdateVisible = false">取 消</el-button>
        <el-button type="primary" @click="edit(updateform.adminId)"
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <!--分页-->
    <div class="fenye">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="list.total"
        :page-size="list.pageSize"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: "regist",
  data() {
    return {
      value: [],
      dialogFormupdateVisible: false,
      dialogFormEditVisible: false,
      dialogFormaddVisible: false,
      pageform: {},
      currentpage: 1,
      dialogFormupdataVisible: false,
      //添加
      addform: {
        adminUsername: "",
        adminPassword: "",
        adminEmail: "",
        adminDisabled: "",
        roles: []
      },
      //数据列表
      list: [],
      //更新
      updateform: [],
      searchList: [],
      //权限列表
      powerid: "",
      powers: [
        {
          id: 2,
          roleName: "订单管理"
        },
        {
          id: 3,
          roleName: "客服管理"
        },
        {
          id: 4,
          roleName: "内容管理"
        },
        {
          id: 5,
          roleName: "保险管理"
        },
        {
          id: 6,
          roleName: "第三方管理"
        },
        {
          id: 7,
          roleName: "设置"
        }
      ]
    };
  },
  created() {
    this.getuserList(1, 5);
    this.getpowers();
  },
  methods: {
    //获取数据渲染表格
    valChange() {
      this.powerid = this.value.join(",");
    },
    getuserList(page, limit) {
      this.$axios
        .post(
          this.$api.login.regist.page,
          /* "http://localhost:4567/page" */
          {
            page: page,
            limit: limit
          },
          {
            headers: {
              "Content-Type": "application/json",
              token: sessionStorage.getItem("token")
            }
          }
        )
        .then(response => {
          console.log(response);
          if (response.data.code === "200") {
            console.log(response);
            this.list = response.data.data;
          } else {
            this.$alert(response.data.data.msg);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    //获取当前页并请求当前页数据
    handleCurrentChange(val) {
      console.log(val);
      this.currentpage = val;
      this.getuserList(val, 5);
    },
    //删除
    deluser(val) {
      // console.log(val)
      this.$confirm("此操作将永久删除该用户, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          //发起删除请求
          this.$axios
            .post(
              this.$api.login.regist.delete,
              {
                adminId: val
              },
              {
                headers: {
                  "Content-Type": "application/json",
                  token: sessionStorage.getItem("token")
                }
              }
            )
            .then(response => {
              this.getuserList(this.currentpage, 5);
              console.log(response);
              this.$message({
                type: "success",
                message: "删除成功!"
              });
            });
        })
        .catch(err => {
          console.log(err);
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    //添加
    adduser() {
      console.log(this.powerid);
      this.dialogFormaddVisible = false;
      // console.log(keys);
      this.$axios
        .post(
          this.$api.login.regist.add,
          JSON.stringify({
            adminUsername: this.addform.adminUsername,
            adminPassword: this.addform.adminPassword,
            adminEmail: this.addform.adminEmail,
            adminDisabled: this.addform.adminDisabled,
            powers: this.powerid
          }),
          {
            headers: {
              "Content-Type": "application/json",
              token: sessionStorage.getItem("token")
            }
          }
        )
        .then(response => {
          console.log(response);
          if (response.data.code === "200") {
            console.log(response.data);
            this.getuserList(1, 5);
            this.$alert(response.data.msg);
          } else {
            this.dialogFormaddVisible = true;
            this.$alert(response.data.msg);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    //修改
    update(val) {
      this.dialogFormupdateVisible = true;
      console.log(val);
      this.updateform = { ...val };
    },
    //修改
    edit(val) {
      this.dialogFormupdateVisible = false;
      console.log(this.updateform, val);
      this.$axios
        .post(
          this.$api.login.regist.update,
          {
            adminId: this.updateform.adminId,
            adminUsername: this.updateform.adminUsername,
            adminEmail: this.updateform.adminEmail,
            adminDisabled: this.updateform.adminDisabled
          },
          {
            headers: {
              "Content-Type": "application/json",
              token: sessionStorage.getItem("token")
            }
          }
        )
        .then(response => {
          console.log(response);
          if (response.data.code === "200") {
            this.getuserList(this.currentpage, 5);
            this.$message({
              type: "success",
              message: "修改成功"
            });
          }
        })
        .catch(err => {
          this.$message({
            type: "info",
            message: "修改失败"
          });
          console.log(err);
        });
    },
    //搜索
    select(val) {
      console.log(val);
      this.$axios
        .post(
          this.$api.login.regist.search,
          {
            adminUsername: val,
            page: 1,
            limit: 5
          },
          {
            headers: {
              "Content-Type": "application/json",
              token: sessionStorage.getItem("token")
            }
          }
        )
        .then(response => {
          console.log(response.data.data.list);
          if (response.data.code === "200") {
            this.list = response.data.data;
          } else {
            this.list.list = response.data.data;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    //获取全部权限
    getpowers() {
      this.$axios
        .post(
          this.$api.login.regist.getpowers,
          {},
          {
            headers: {
              "Content-Type": "application/json",
              token: sessionStorage.getItem("token")
            }
          }
        )
        .then(response => {
          if (response.data.code === "200") {
            this.powers = response.data.data;
            console.log(this.powers);
          }
          console.log(response);
        })
        .catch(err => {
          console.log(err);
          this.$message({
            type: "warning",
            message: "出错啦!"
          });
        });
    },
    rowClass() {
      //表格数据居中显示
      return "text-align:center";
    },
    headClass() {
      //表头居中显示
      return "text-align:center";
    }
  }
};
</script>

<style scoped>
.cell {
  text-align: center;
}
.el-card {
  margin-bottom: 20px;
}
/deep/ .el-card__body {
  width: 100%;
  display: flex;
  padding: 0;
}

.fenye {
  margin-top: 20px;
}

.adduser {
  float: right;
  margin: 20px;
}

.search {
  /* display: flex !important; */
  margin: 1.25rem;
  float: left;
  width: 18.75rem !important;
}
.topbar {
  width: 100%;
}
</style>
